<template>
	<view class="audioMain" v-if="isShow" :style="{ top: top ? top + 'vh' : '70vh' }">
		<view class="bgRipple" v-show="currentStatus !== 'startRecord'" :class="{ ripple: currentStatus === 'endRecord' }"></view>
		<view class="audio" @tap="isStart ? null : audioTap()"><image :src="statusOptions[currentStatus].imageUrl"></image></view>
		<view class="audioName" :style="{ color: currentStatus === 'startRecord' ? '#FCC77D' : '#FF8348' }">{{ statusOptions[currentStatus].audioName }}</view>
	</view>
</template>

<script>
export default {
	props: ['isStart', 'answerText', 'typeCode', 'answerLimitMs', 'top'],
	data() {
		return {
			recorderManager: null,
			innerAudioContext: null,
			statusOptions: Object.freeze({
				startRecord: {
					audioName: '点击答题',
					imageUrl: '../../static/audio/startAudio.png'
				},
				endRecord: {
					audioName: '点击停止',
					imageUrl: '../../static/audio/stopAudio.png'
				},
				uploadRecord: {
					audioName: '正在上传',
					imageUrl: '../../static/audio/upload.png'
				},
				finishRecord: {
					audioName: '上传成功',
					imageUrl: '../../static/audio/success.png'
				}
			}),
			currentStatus: 'startRecord',
			answerTime: null,
			isShow: false
		}
	},
	created() {
		this.recorderManager = uni.getRecorderManager()
		this.innerAudioContext = uni.createInnerAudioContext()
	},
	beforeDestroy() {
		this.recorderManager.stop()
		clearTimeout(this.answerTime)
	},
	watch: {
		isStart: function(bool) {
			this.isShow = !bool
			if (bool) {
				this.recorderManager.stop()
				clearTimeout(this.answerTime)
				this.initStatus()
			}
		}
	},
	methods: {
		initStatus: function() {
			this.currentStatus = 'startRecord'
		},
		audioTap: function() {
			if (this.currentStatus === 'startRecord') {
				this.currentStatus = 'endRecord'
				this.touchAudio()
				this.recorderManager.start({
					format: 'mp3'
				})
				if (this.answerLimitMs) {
					this.answerTime = setTimeout(() => {
						this.endRecord()
					}, this.answerLimitMs)
				}
				return
			}
			if (this.currentStatus === 'endRecord') {
				this.touchAudio()
				this.endRecord()
			}
		},
		endRecord: function() {
			this.currentStatus = 'uploadRecord'
			clearTimeout(this.answerTime)
			this.recorderManager.stop()
			this.recorderManager.onStop(res => {
				const texts = this.answerText ? this.answerText.join(',') : ''
				uni.uploadFile({
					url: this.api.audioText,
					filePath: res.tempFilePath,
					name: 'file',
					formData: {
						texts,
						questionTypeCode: this.typeCode
					},
					success: res => {
						this.currentStatus = 'finishRecord'
						const audioData = JSON.parse(res.data)
						this.$emit('recordFinish', audioData)
					},
					fail: err => {
						this.currentStatus = 'startRecord'
						uni.showToast({
							title: '语音上传失败，再试一下！',
							icon: 'none'
						})
					}
				})
			})
		}
	}
}
</script>

<style scoped lang="stylus">
.audioMain
	position absolute
	left 0
	width 100vw
	z-index 9
	animation outIn 0.3s
	.ripple
		animation ripple 2s infinite
	.bgRipple
		position absolute
		width 180rpx
		height 180rpx
		top 0rpx
		left calc(50% - 90rpx)
		border-radius 50%
		background rgba(255, 134, 100, 0.2)
	.audio
		position absolute
		width 160rpx
		height 160rpx
		top 10rpx
		left calc(50% - 80rpx)
		filter drop-shadow(6rpx 6rpx 12rpx rgba(253, 197, 85, 0.3))
		image
			width 100%
			height 100%
	.audioName
		font-size 35rpx
		margin-top 200rpx
		width 100%
		text-align center
		letter-spacing 5rpx
.isNone
	filter grayscale(1)
@keyframes ripple
	0%
		transform scale(1)
		opacity 1
	50%
		transform scale(1.2)
		opacity 0
	100%
		transform scale(1)
		opacity 1
</style>
